<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('字段详细设计')"/>
    <th:block th:include="include :: select2-css"/>
    <style type="text/css">

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-interface-add">
        <input type="hidden" id="id" name="id" th:value="${id}">
        <input type="hidden" id="type" name="type" th:value="${type}">

        <div class="form-group" th:if="${pkFlag} == true">
            <label class="col-sm-5 control-label">字段约定模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6">
                <select name="designContent" id="designContent" class="form-control m-b"
                        th:with="type=${@dict.getType('pkType')}" th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="${designContent}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="designContent" type="hidden"
                                                             th:value="${designContent}"></span>
            </div>
        </div>
        <div class="form-group" th:if="${fkFlag} == true">
            <label class="col-sm-5 control-label">字段约定模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6">
                <select name="designContent" id="designContent" class="form-control m-b"
                        th:with="type=${@dict.getType('fkType')}" th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="${designContent}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="designContent" type="hidden"
                                                             th:value="${designContent}"></span>
            </div>
        </div>
        <div class="form-group" th:if="${fkFlag} == true" id="remarkDiv" style="display: none">
            <label class="col-sm-5 control-label">字段约定模式备注：</label>
            <div class="col-sm-6">
                <p class="form-control-static"></p>
            </div>
        </div>
        <div class="form-group" th:if="${enumFlag} == true">
            <label class="col-sm-5 control-label">字段约定模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6">
                <select name="designContent" id="designContent" class="form-control select2-multiple" multiple
                        th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${sysDictDatas}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="designContent" type="hidden"
                                                             th:value="${designContent}"></span>
            </div>
        </div>
        <div class="form-group" th:if="${enumFlag} == true">
            <label class="col-sm-5 control-label">枚举类型：</label>
            <div class="col-sm-6">
                <select name="fieldDescription" id="fieldDescription" class="form-control m-b"
                        th:with="type=${@dict.getType('enumType')}" th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${fieldDescription}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="fieldDescription" type="hidden" th:value="${fieldDescription}"></span>
            </div>
        </div>
        <div class="form-group" th:if="${timeFlag} == true">
            <label class="col-sm-5 control-label">字段约定模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6">
                <select name="designContent" id="designContent" class="form-control m-b"
                        th:with="type=${@dict.getType('timeType')}" th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${designContent}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="designContent" type="hidden"
                                                             th:value="${designContent}"></span>
            </div>
        </div>

        <div class="form-group" th:if="${otherFlag} == true">
            <label class="col-sm-5 control-label">字段约定模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6">
                <select name="designContent" id="designContent" class="form-control m-b"
                        th:with="type=${@dict.getType('otherType')}" th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="${designContent}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="designContent" type="hidden"
                                                             th:value="${designContent}"></span>
            </div>
        </div>
<!--        <div class="form-group" style="display:none;" id="fieldDescriptionDiv" th:if="${otherFlag} == true">-->
<!--            <label class="col-sm-5 control-label">OTHER-编码前缀：</label>-->
<!--            <div class="col-sm-6">-->
<!--                <select name="fieldDescription" id="fieldDescription" class="form-control m-b"-->
<!--                        th:with="type=${@dict.getType('NUMBER_PREFIX')}" th:disabled="${isUpdate} == 'Y' ? false : true">-->
<!--                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${fieldDescription}"></option>-->
<!--                </select>-->
<!--                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="fieldDescription" type="hidden"-->
<!--                                                             th:value="${fieldDescription}"></span>-->
<!--            </div>-->
<!--        </div>-->

        <div class="form-group dictDiv" id="dictCategoryDiv" th:if="${otherFlag} == true">
            <label class="col-sm-5 control-label">字典分类：</label>
            <div class="col-sm-6">
                <select name="dictCategory" id="dictCategory" class="form-control m-b"
                        th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option value="">请选择</option>
                    <option th:each="dict : ${dictCategoryList}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="${dictCategory}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="dictCategory" type="hidden"
                                                             th:value="${dictCategory}"></span>
            </div>
        </div>
        <div class="form-group dictDiv" id="dictTypeDiv" th:if="${otherFlag} == true">
            <label class="col-sm-5 control-label">字典：</label>
            <div class="col-sm-6">
                <select name="dictType" id="dictType" class="form-control m-b"
                        th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${dictTypeList}" th:text="${dict.dictName}" th:value="${dict.dictType}"
                            th:field="${dictType}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="dictType" type="hidden"
                                                             th:value="${dictType}"></span>
            </div>
        </div>
        <div class="form-group dictDiv" id="dictValueDiv" th:if="${otherFlag} == true">
            <label class="col-sm-5 control-label">字典值：</label>
            <div class="col-sm-6">
                <select name="dictValue" id="dictValue" class="form-control m-b"
                        th:disabled="${isUpdate} == 'Y' ? false : true">
                    <option th:each="dict : ${dictValueList}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="${dictValue}"></option>
                </select>
                <span th:if="${isUpdate} == 'N'">(已锁定)<input name="dictValue" type="hidden"
                                                             th:value="${dictValue}"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">字段自定义模式（一旦选择，上级锁定）：</label>
            <div class="col-sm-6" th:if="${isUpdate} == 'Y'">
                <input type="text" name="fieldDescription2" class="form-control" th:value="${fieldDescription}" readonly/>
            </div>
            <div class="col-sm-6" th:unless="${isUpdate} == 'Y'">
                <p class="form-control-static" th:text="${fieldDescription}"></p>
                <p class="form-control-static">(已锁定)<input name="fieldDescription2" type="hidden"
                                                           th:value="${fieldDescription}"></p>
            </div>
        </div>

        <div class="form-group" th:if="${fbType} == '2' or ${fbType} == '4'">
            <label class="col-sm-5 control-label">字段中文别名：</label>
            <div class="col-sm-6">
                <input type="text" name="aliasZhName" th:value="${aliasZhName}" class="form-control"/>
            </div>
        </div>
        <div class="form-group" th:if="${fbType} == '2' or ${fbType} == '4'">
            <label class="col-sm-5 control-label">字段英文别名：</label>
            <div class="col-sm-6">
                <input type="text" name="aliasName" th:value="${aliasName}" class="form-control"/>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    var prefix = ctx + "interface/interface";
    $("#form-interface-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var config = {
                url: prefix + "/updateFieldDesign",
                type: "POST",
                dataType: "json",
                async: false,
                data: $('#form-interface-add').serialize(),
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        return true;
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }

                }
            };
            $.ajax(config);
        }
    }

    function resetHandler() {
        if ($.validate.form()) {
            var config = {
                url: prefix + "/resetFieldDesign",
                type: "POST",
                dataType: "json",
                async: false,
                data: $('#form-interface-add').serialize(),
                success: function (result) {

                }
            };
            $.ajax(config);
        }
    }

    var designContent = [[${designContent}]];
    var isRequiredFlag = [[${isRequiredFlag}]];
    var isRequired = [[${isRequired}]];
    var isUpdate = [[${isUpdate}]];
    var fkFlag = [[${fkFlag}]];
    var otherFlag = [[${otherFlag}]];
    var enumFlag = [[${enumFlag}]];
    var fieldDescription = [[${fieldDescription}]];
    var fkEnum = [[${@dict.getType('fkType')}]];

    $("#designContent").select2();
    if (isRequiredFlag) {
        $("#isRequired").select2();
        var arr = [];
        arr.push(isRequired)
        $('#isRequired').val(arr).trigger("change");
    }

    if (designContent) {
        var arr = designContent.split(",");
        if (arr.length == 1) {
            $("#designContent").select2("val", arr);
        } else {
            $('#designContent').val(arr).trigger("change");
        }
        if (isUpdate == 'N') {
            $('#designContent').prop('disabled', true);
        }
    }

    if (fkFlag) {
        $("#remarkDiv").show();
        $('#designContent').on('select2:select', function (e) {
            var value = $('#designContent').select2('val');
            for (var i = 0; i < fkEnum.length; i++) {
                if (fkEnum[i].dictValue == value) {
                    $("#remarkDiv p").text(fkEnum[i].remark);
                    break;
                }
            }
        });

        if (designContent) {
            for (var i = 0; i < fkEnum.length; i++) {
                if (fkEnum[i].dictValue == designContent) {
                    $("#remarkDiv p").text(fkEnum[i].remark)
                }
            }
        } else {
            $("#remarkDiv p").text(fkEnum[0].remark)
        }
    }
    if (isUpdate == 'N') {
        $(".layui-layer-btn0", window.parent.document).hide();
        $(".layui-layer-btn1", window.parent.document).hide();
    }

    if (enumFlag) {
        $('#fieldDescription').select2();
        if (fieldDescription) {
            var arr = [];
            arr.push(fieldDescription)
            $('#fieldDescription').select2('val', arr);
        }
    }

    var dictCategory = [[${dictCategory}]]
    var dictType = [[${dictType}]]
    var dictValue = [[${dictValue}]]
    if (otherFlag) {
        $("#dictCategory").select2();
        $("#dictType").select2();
        $("#dictValue").select2();
        $("#fieldDescription").select2();
        if (dictCategory) {
            var arr = [];
            arr.push(dictCategory)
            $('#dictCategory').select2('val', arr);
        }
        if (dictType) {
            var arr = [];
            arr.push(dictType)
            $('#dictType').select2('val', arr);
        }
        if (fieldDescription) {
            var arr = [];
            arr.push(fieldDescription)
            $('#fieldDescription').select2('val', arr);
        }

        var value = $('#designContent').select2('val');
        $("#fieldDescriptionDiv").show();
        // if (value == 'CUSTOM_CONVENTION') {
        //     $(".dictDiv").show();
        // } else if (value == 'AUTO_GENERATE') {
        //     $("#fieldDescriptionDiv").show();
        // }
        // $('#designContent').on('select2:select', function (e) {
        //     var value = $('#designContent').select2('val');
        //     if (value == 'CUSTOM_CONVENTION') {
        //         $(".dictDiv").show();
        //         $("#fieldDescriptionDiv").hide();
        //         //bindDictCategoryEvent();
        //     } else {
        //         $(".dictDiv").hide();
        //         if (value == 'AUTO_GENERATE') {
        //             $("#fieldDescriptionDiv").show();
        //         } else {
        //             $("#fieldDescription").select2('val', [""]);
        //             $("#fieldDescriptionDiv").hide();
        //         }
        //     }
        // });
        bindDictCategoryEvent();
        bindDictTypeEvent();
        if (dictValue) {
            var arr = [];
            arr.push(dictValue)
            $('#dictValue').select2('val', arr);
        }
    }

    function bindDictCategoryEvent() {
        $('#dictCategory').on('select2:select', function (e) {
            var value = $('#dictCategory').select2('val');
            $("#dictType").empty();
            $("#dictValue").empty();
            var url = ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/getDictListByCategory?category=" + value;
            var config = {
                url: url,
                type: "get",
                dataType: "json",
                data: null,
                success: function (result) {
                    var data = result.data;
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            $("#dictType").append("<option value='" + data[i].dictType + "'>" + data[i].dictName + "</option>");
                        }
                        queryDictValue(data[0].dictType);
                        //bindDictTypeEvent();
                    }
                }
            };
            $.ajax(config);

        });
    }

    function bindDictTypeEvent() {
        $('#dictType').on('select2:select', function (e) {
            var value = $('#dictType').select2('val');

            queryDictValue(value);
        });
    }

    function queryDictValue(value) {
        $("#dictValue").empty();
        var url = ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/queryDict?dictType=" + value;
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: null,
            success: function (result) {
                var data = result.data;
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#dictValue").append("<option value='" + data[i].dictValue + "'>" + data[i].dictLabel + "</option>");
                    }
                }
            }
        };
        $.ajax(config);
    }


    $(".layui-layer-btn2", window.parent.document).addClass("selfBtn");
</script>
</body>
</html>